<template>
  <div class="x-unit" @click.self="closeMask1('process')" :style="{height:`${deviceH}px`}">
    <div class="unit-ctx" :style="{'background-image':`url(${modelBg})`}">
      <div class="ctx-title">新丰苑业务流程</div>
      <div class="ctx-info" >
        <div class="ctx-content">
          <div class="ctx-header">
            <div>
               出租房屋报备
            </div>

          </div>
          <div>
            <div class="item-rs" @click="showDetail('')" >
              <div class="rs-icon">
                <img class="pic" src="../../assets/images/dialog/house.png" />
              </div>
              <div class="rs-txt">
                <div class="txt-name">房屋总数</div>
                <div class="txt-number">2870</div>
              </div>
            </div>
             <div class="item-rs" @click="showDetail('chuzu')">
              <div class="rs-icon">
                <img class="pic" src="../../assets/images/dialog/chuzu.png" />
              </div>
              <div class="rs-txt">
                <div class="txt-name">{{FlowChartData[0].itmes[0].name}}</div>
                <div class="txt-number">{{FlowChartData[0].itmes[0].value}}</div>
              </div>
            </div>
            <div class="item-rs" @click="showDetail('')">
              <div class="rs-icon">
                <img class="pic" src="../../assets/images/dialog/fangdong.png" />
              </div>
              <div class="rs-txt">
                <div class="txt-name">{{FlowChartData[0].itmes[1].name}}</div>
                <div class="txt-number">{{FlowChartData[0].itmes[1].value}}</div>
              </div>
            </div>
            <div class="item-rs" @click="showDetail('')">
              <div class="rs-icon">
                <img class="pic" src="../../assets/images/dialog/erfangdong.png" />
              </div>
              <div class="rs-txt">
                <div class="txt-name">{{FlowChartData[0].itmes[2].name}}</div>
                <div class="txt-number">{{FlowChartData[0].itmes[2].value}}</div>
              </div>
            </div>


          </div>
        </div>
         <div class="ctx-content">
          <div class="ctx-header">
            <div>
               门禁注册登记
            </div>
            <!-- <div>
              <img src="../../assets/images/dialog/xiaochengxu.png" alt="">
            </div> -->
          </div>
          <div>
            <div class="item-rs" @click="showDetail('erweima')">
              <div class="rs-icon">
                <img class="pic" src="../../assets/images/dialog/erweima.png" />
              </div>
              <div class="rs-txt">
                <div class="txt-name">{{FlowChartData[1].itmes[2].name}}</div>
                <div class="txt-number">{{FlowChartData[1].itmes[2].value}}</div>
              </div>
            </div>
             <div class="item-rs" @click="showDetail()">
              <div class="rs-icon">
                <img class="pic" src="../../assets/images/dialog/rengong.png" />
              </div>
              <div class="rs-txt">
                <div class="txt-name">{{FlowChartData[1].itmes[0].name}}</div>
                <div class="txt-number">{{FlowChartData[1].itmes[0].value}}</div>
              </div>
            </div>
            <div class="item-rs" @click="showDetail('zizhu')">
              <div class="rs-icon">
                <img class="pic" src="../../assets/images/dialog/zizhuji.png" />
              </div>
              <div class="rs-txt">
                <div class="txt-name">{{FlowChartData[1].itmes[1].name}}</div>
                <div class="txt-number">{{FlowChartData[1].itmes[1].value}}</div>
              </div>
            </div>
             <div class="item-name" style="color:#56FFFA">按居住类型统计</div>
            <div class="item-pie">
              <x-pie id="fixcar" :data="FlowChartData[2].itmes" />
            </div>



          </div>
        </div>
         <div class="ctx-content">
          <div class="ctx-header">
            <div>
               现场信息审核
            </div>
             <div style="visibility: hidden;">
              <img src="../../assets/images/dialog/xiaochengxu.png" alt="">
            </div>
          </div>
          <div>
            <div class="item-rs" @click="showDetail('yishenhe')">
              <div class="rs-icon">
                <img class="pic" src="../../assets/images/dialog/yishenhe.png" />
              </div>
              <div class="rs-txt">
                <div class="txt-name">{{FlowChartData[3].itmes[0].name}}</div>
                <div class="txt-number">{{FlowChartData[3].itmes[0].value}}</div>
              </div>
            </div>
             <div class="item-rs" @click="showDetail('')">
              <div class="rs-icon">
                <img class="pic" src="../../assets/images/dialog/daishenhe.png" />
              </div>
              <div class="rs-txt">
                <div class="txt-name">{{FlowChartData[3].itmes[1].name}}</div>
                <div class="txt-number">{{FlowChartData[3].itmes[1].value}}</div>
              </div>
            </div>
             <div class="item-name" style="color:#56FFFA;text-align: left;padding-left: 20px;">审核人排名</div>
             <ul v-if="FlowChartData[4].itmes.length" class="type-list" style="height:300px;overflow-y: auto;">
              <li v-for="item in FlowChartData[4].itmes" :key="item.name"  class="type-list-rs" style="cursor: pointer;">
                <div class="rs-name">
                  <span class="name">{{item.name |filterName}}</span>
                  <span class="number">{{item.value}}</span>
                </div>
                <div class="rs-process">
                  <div class="process" :style="{width:`${(item.value/FlowChartData[4].itmes[0].value)*100}%`}"></div>
                </div>
              </li>
            </ul>



          </div>
        </div>
        <!-- 连接框 -->
        <div style="position: relative;">
          <div class="contect-line">
            <div style="height:90px"></div>
            <div style="height:62px;border-right: 4px solid rgba(36,105,112,0.50);"></div>
            <div style="height:198px;border: 4px solid rgba(36,105,112,0.50);border-top:0px;position: relative;">
              <div style="position: absolute;left: -12px;top: 70px;">
                <img src="../../assets/images/dialog/jiantou.png" alt="">
              </div>
              <div  style="position: absolute;right: -12px;top: 70px;"><img src="../../assets/images/dialog/jiantou.png" alt=""></div>
              <div style="transform: translate(-50%, -50%);position: absolute;bottom: -50px;height: 50px; display: flex; align-items: center;left: 50%;">
                <div style="width:50px;height:50px">
                  <img src="../../assets/images/dialog/yibiaosanshi.png" alt="">
                </div>
                <div style="font-size: 18px;color: #72EDF5;margin-left:15px;">
                  一标三实系统
                </div>
              </div>
            </div>
          </div>
          <div class="contect">

            <div class="ctx-content1" >
                    <div class="ctx-header">
                      <div>
                        人口流入确认
                      </div>
                      <div style="visibility: hidden;">
                        <img src="../../assets/images/dialog/xiaochengxu.png" alt="">
                      </div>
                    </div>
                    <div>
                      <div class="item-rs" @click="showDetail('')">
                        <div class="rs-icon">
                          <img class="pic" src="../../assets/images/dialog/xinzeng.png" />
                        </div>
                        <div class="rs-txt">
                          <div class="txt-name">{{FlowChartData[5].itmes[0].name}}</div>
                          <div class="txt-number">{{FlowChartData[5].itmes[0].value}}</div>
                        </div>
                      </div>
                      <div class="item-rs" @click="showDetail('')">
                        <div class="rs-icon">
                          <img class="pic" src="../../assets/images/dialog/xinzeng.png" />
                        </div>
                        <div class="rs-txt">
                          <div class="txt-name">{{FlowChartData[5].itmes[1].name}}</div>
                          <div class="txt-number">{{FlowChartData[5].itmes[1].value}}</div>
                        </div>
                      </div>

                    </div>
                  </div>
                  <div class="ctx-content2" >
                    <div class="ctx-header">

                        综合分析

                    </div>
                    <div style="margin:0 auto">
                      <div style="margin-bottom:36px;cursor: pointer;" @click="dialogVisible1=true">
                        <div class="rs-icon">
                          <img class="pic" src="../../assets/images/dialog/renkoufenxi.png" />
                        </div>
                        <div class="txt-name">人口分析</div>
                      </div>
                      <div  style="margin-bottom:36px;cursor: pointer;" @click="showdialog1()">
                        <div class="rs-icon">
                          <img class="pic" src="../../assets/images/dialog/fangwufenxi.png" />
                        </div>
                          <div class="txt-name">房屋分析</div>
                      </div>
                      <div @click="showdialog2()" style="cursor: pointer;">
                        <div class="rs-icon" >
                          <img class="pic" src="../../assets/images/dialog/menjinfenxi.png" />
                        </div>
                          <div class="txt-name">门禁分析</div>
                      </div>

                    </div>
                  </div>
                  <div class="ctx-content1" >
                    <div class="ctx-header">
                      <div>
                        人口迁离预警
                      </div>
                      <div style="visibility: hidden;">
                        <img src="../../assets/images/dialog/xiaochengxu.png" alt="">
                      </div>
                    </div>
                    <div>
                      <div class="item-rs" @click="showDetail('qianli')">
                        <div class="rs-icon">
                          <img class="pic" src="../../assets/images/dialog/biaoji.png" />
                        </div>
                        <div class="rs-txt">
                          <div class="txt-name">{{FlowChartData[6].itmes[0].name}}</div>
                          <!-- <div class="txt-number">{{FlowChartData[6].itmes[0].value}}</div> -->
                            <div class="txt-number">573</div>
                        </div>
                      </div>
                      <div class="item-rs" @click="showDetail('')">
                        <div class="rs-icon">
                          <img class="pic" src="../../assets/images/dialog/weichuxian.png" />
                        </div>
                        <div class="rs-txt">
                          <div class="txt-name">{{FlowChartData[6].itmes[1].name}}</div>
                          <div class="txt-number">{{FlowChartData[6].itmes[1].value}}</div>
                        </div>
                      </div>

                    </div>
                  </div>
                  <div class="ctx-content1" style="border-right:0px">
                    <div class="ctx-header">
                      <div>
                        迁离信息确认
                      </div>
                      <div style="visibility: hidden;">
                        <img src="../../assets/images/dialog/xiaochengxu.png" alt="">
                      </div>
                    </div>
                    <div>
                      <div class="item-rs" @click="showDetail('')">
                        <div class="rs-icon">
                          <img class="pic" src="../../assets/images/dialog/qianli.png" />
                        </div>
                        <div class="rs-txt">
                          <div class="txt-name">{{FlowChartData[7].itmes.name}}</div>
                          <!-- <div class="txt-number">{{FlowChartData[7].itmes.value}}</div> -->
                          <div class="txt-number">139</div>
                        </div>
                      </div>

                    </div>
                  </div>
             </div>
        </div>


      </div>
      <el-dialog :visible.sync="dialogVisible"   v-if="dialogVisible && picurl.length>0" v-dialogDrag class="jk-dialog contentnone" width="80%">
      <div style="margin:auto;">
        <img :src="picurl" alt style="height:100%" />
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible1" append-to-body v-if="dialogVisible1" style="z-index:9999"  class="jk-dialog content_dialog" width="100%">
        <x-people
          @closeMask="closeMask2('people')"
          v-if="dialogVisible1"
          :PeopleEchartsData="PeopleEchartsData"
          :code="code"
        />
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible2" append-to-body v-if="dialogVisible2" style="z-index:9999"  class="jk-dialog content_dialog" width="100%">
      <Xzhihuimenjin
      @closeMask="closeMask2('menjin')"
      v-if="dialogVisible2"
      :id="id"
      :code="code"
      :zhihuimenjinInfo="zhihuimenjinInfo"
    ></Xzhihuimenjin>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible3" append-to-body v-if="dialogVisible3" style="z-index:9999"  class="jk-dialog content_dialog" width="100%">
      <x-house
      @closeMask="closeMask2('house')"
      v-if="dialogVisible3"
      :id="id"
      :code="code"
    />
    </el-dialog>


    </div>
  </div>
</template>
<script>
  import XPage from '@/components/xpage';
  import XPie from "@/components/xpie";
  import XSelect from '@/components/xselect';
  import user from '@/api/user.json'
  import XPeople from "@/components/xpeoplemodel";
  import Xzhihuimenjin from "../../components/xzhihuimenjin/index.vue";
  import XHouse from "@/components/xhousemodel";
  import {
    getFlowChart,
    GetzufangInfo,
    GetEpidemicInfo
  } from '@/api/peopleApi';
  export default {
    name: "xpowermodel",
    props: {
      id: {
        type: String,
        default: ""
      },
      code: {
        type: String,
        default: ""
      },
      PeopleEchartsData:{
         type: Array,
        default: () => {
          return [];
        }
      }
    },
    computed: {

    },
      filters:{
       filterName(val) {
         var name=''
         user.map(item=>{
           if(item.userid==val){
             name=item.truename
           }

         })
        return name
      }
    },
    data() {
      return {
        modelBg: require('@/assets/images/modelBg.png'),
        deviceH: 0,
        FlowChartData:[],
        dialogVisible:false,
        picurl:'',
        dialogVisible1:false,
        dialogVisible2:false,
        dialogVisible3:false,
        zhihuimenjinInfo:[],
      }
    },
    beforeMount() {
      let h = document.documentElement.clientHeight || document.body.clientHeight;
      this.deviceH = h
    },
    mounted() {
      console.log('*********')
      this.getData()
    },
    components: {
      XPage,
      XSelect,
      XPie,
      XPeople,
      Xzhihuimenjin,
      XHouse
    },
    methods: {
      showdialog1(){
        this.dialogVisible3=true
      },
      async showdialog2(){
        let zhihuimenjinquery = {
              code: this.code,
              id: this.id
            };
        this.zhihuimenjinInfo = await GetEpidemicInfo(zhihuimenjinquery)
        this.dialogVisible2=true
      },
      async getData(){
        this.FlowChartData=await getFlowChart(this.code)
        console.log(getFlowChart(this.code))
      },
      //关闭
      closeMask2(name) {
         console.log(name)
         if(name=='people'){
           this.dialogVisible1=false
         }
         if(name=='menjin'){
           this.dialogVisible2=false
         }
          if(name=='house'){
           this.dialogVisible3=false
         }

        // this.$emit("closeMask")
      },
       closeMask1(name) {
         console.log(name)
        this.$emit("closeMask")
      },
      clsoerenkou(){
        console.log('close')
        this.dialogVisible1=false
      },
      showDetail(name){
        this.dialogVisible=!this.dialogVisible;
        switch(name){
           case 'total':
            this.picurl=require('../../assets/images/dialog/total.png')
            break;
          case 'chuzu':
            this.picurl=require('../../assets/images/dialog/chuzudetail.gif')
            break;
          case 'fangdong':
            this.picurl=require('../../assets/images/dialog/fangdongdetail.png')
            break;
          case 'erfangdong':
            this.picurl=require('../../assets/images/dialog/erfangdongdetail.png')
            break;
          case 'yishenhe':
            this.picurl=require('../../assets/images/dialog/WechatIMG3.png')
            break;
          case 'daishenhe':
            this.picurl=require('../../assets/images/dialog/daishenhedetail.png')
            break;
          case 'qianli':
            this.picurl=require('../../assets/images/dialog/qianlidetail.gif')
            break;
          case 'erweima':
            this.picurl=require('../../assets/images/dialog/erweimadetail.gif')
            break;
          case 'tuizu':
            this.picurl=require('../../assets/images/dialog/tuizudetail.png')
            break;
          case 'zizhu':
            this.picurl=require('../../assets/images/dialog/zizhudetail.png')
            break;
          default:
            this.picurl=''
            this.dialogVisible=!this.dialogVisible;
            break
        }
      }


    }
  }
</script>
<style lang="less" scoped>
  .type-list {
            width: 100%;
            padding: 0;
            margin-top: 26px;
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            box-sizing: border-box;

            .type-list-rs {
              width: 80%;
              margin:0 auto;
              list-style: none;
              margin-bottom: 20px;

              .rs-name {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #E5E5E5;
                margin-bottom: 5px;

                .name {
                  flex: 1;
                  text-align: left;
                }

                .number {
                  flex: 1;
                  text-align: right;
                }
              }

              .rs-process {
                width: 100%;
                height: 6px;
                border-radius: 4px;
                background: #333333;

                .process {
                  transition: width .3s ease-in-out;
                  height: 100%;
                  border-radius: 4px;
                  background-image: linear-gradient(270deg, #68E0CF 0%, #209CFF 100%);
                }
              }
            }
          }
   .item-pie {
          width: 100%;
          height: 140px;
          margin-top: 10px;
          padding: 5px 0px;
          box-sizing: border-box;

          .pie-canvas {
            width: 100%;
            height: 100%;
          }
        }
.contect-line{
  // border: 4px solid rgba(36,105,112,0.50);
  width: 570px;
  height: 350px;
  position: absolute;
  left:110px;
  top:100px;
}
.ctx-content{
  width:280px;
  border-right: 1px dashed rgba(36,105,112,0.50);
  height: 80%;
  margin: 10px 0;

  .ctx-header{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding:0 20px 50px;
  }
}

.ctx-content1{
  width:240px;
  border-right: 1px dashed rgba(36,105,112,0.50);
  height: 376px;
  margin: 10px 0;

  .ctx-header{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding:0 20px 50px;
  }
}
.ctx-content2{
  width:100px;
  border-right: 1px dashed rgba(36,105,112,0.50);
  height: 376px;
  margin: 10px 0;

  .ctx-header{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding:10px 10px 50px;
  }
}
 .item-rs {
      display: flex;
      width:200px;
      justify-content: center;
      align-items: center;
      height: 80px;
      box-sizing: border-box;
      cursor: pointer;
      margin:0 auto;
      margin-bottom: 12px;
      .rs-icon {
        width: 45px;
        height: 45px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .pic {
          // width: 100%;
          height: 100%;
        }
      }
      .rs-txt {
        width: calc(90% - 1.1rem);
        padding-left: 8px;
        padding-right: 10px;
        box-sizing: border-box;
        .txt-name {
          height: 50%;
          line-height: 1.4rem;
          font-family: PingFangHK-Regular;
          font-size: 15px;
          color: #FFFFFF;
          padding: 2px 8px;
          box-sizing: border-box;
          text-align: left;
        }
        .txt-number {
          height: 50%;
          line-height: 37px;
          font-family: Silom;
          font-size: 24px;
          color: #D0B01C;
          letter-spacing: 1.33px;
          padding: 4px 8px;
          box-sizing: border-box;
          text-align: left;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            top: 0;
            width: 80%;
            left: 4px;
            height: 1px;
            border-top: 1px dashed rgba(114, 237, 245, 0.57);
          }
        }
      }
    }
  .x-unit {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 1000;
    font-family: PingFangSC-Semibold;
font-size: 18px;
color: #72EDF5;
     .item-no {
                width: 50px;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                text-align: center;
              }

    .unit-ctx {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 1700px;
      height: 800px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      padding: 10px 30px;
      box-sizing: border-box;

      .ctx-title {
        width: 100%;
        padding-top: 10px;
        box-sizing: border-box;
        font-family: PingFangSC-Medium;
        font-size: 24px;
        color: #E9E9E9;
        letter-spacing: 4.8px;
        text-align: center;
        box-sizing: border-box;
      }

      .ctx-info {
        width: 100%;

        height: 748px;
        padding-top: 20px;
        box-sizing: border-box;
        display: flex;
        // justify-content: space-around;
        align-items: flex-start;
        .contect{

          position: relative;
           height: 748px;
          box-sizing: border-box;
          display: flex;
          align-items: flex-start;
        }

        .info-type {
          flex: 1;

          .type-title {
            width: 100%;
            font-family: PingFangSC-Medium;
            font-size: 18px;
            color: #69D3DA;
            letter-spacing: 0;
            text-align: left;
            overflow: hidden;

            img {
              float: left;
            }

            div {
              float: left;
              margin-left: 20px;
              margin-top: -11px;
            }
          }

          .type-list {
            width: 100%;
            padding: 0;
            margin-top: 26px;
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            box-sizing: border-box;

            .type-list-rs {
              width: 100%;
              list-style: none;
              margin-bottom: 20px;

              .rs-name {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #E5E5E5;
                margin-bottom: 5px;

                .name {
                  flex: 1;
                  text-align: left;
                }

                .number {
                  flex: 1;
                  text-align: right;
                }
              }

              .rs-process {
                width: 100%;
                height: 6px;
                border-radius: 4px;
                background: #333333;

                .process {
                  transition: width .3s ease-in-out;
                  height: 100%;
                  border-radius: 4px;
                  background-image: linear-gradient(270deg, #68E0CF 0%, #209CFF 100%);
                }
              }
            }
          }
        }

        .info-table {
          flex: 3;
          height: 659px;
          padding-left: 40px;
          box-sizing: border-box;

          .table-rs {
            width: 100%;
            height: 562px;
            overflow-y: auto;

            .table-header {
              width: 100%;
              height: 36px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              position: relative;

              .header-item {
                width: 186px;
                height: 100%;
                border: none;
                outline: none;
                background: #06121D;
                border: 1px solid rgba(62, 178, 215, 0.00);
                border-radius: 4px;
                font-size: 14px;
                color: #fff;
                padding: 0 14px;
                box-sizing: border-box;

                .input {
                  font-size: 14px;
                  color: #fff;
                  width: 100%;
                  height: 100%;
                  border: none;
                  outline: none;
                  background: transparent;
                }
              }

              .header-select {
                width: 186px;
                height: 100%;
                background: #06121D;
                border: 1px solid rgba(62, 178, 215, 0.00);
                border-radius: 4px;
                font-size: 14px;
                color: #fff;
                padding: 0 14px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .select-name {
                  width: calc(100% - 20px);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  word-break: normal;
                  text-align: left;
                }

                .iconfont {
                  width: 20px;
                  text-align: right;
                  font-size: 14px;
                  color: #fff;
                  font-weight: 600;
                }
              }

              .header-more {
                width: 56px;
                margin-left: 20px;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #72EDF5;
                line-height: 28px;
                text-decoration: underline;
              }

              .header-btn {
                cursor: pointer;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
                width: 66px;
                height: 100%;
                background: #72EDF5;
                border-radius: 4px;
                text-align: center;
                line-height: 36px;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #000000;
              }
            }

            .table-list {
              width: 100%;
              list-style: none;
              padding: 0;
              margin-top: 15px;

              .list-item {
                padding: 0;
                margin: 0;
                list-style: none;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 36px;

                &:nth-of-type(2n+1) {
                  background: #06121D;

                }

                &:nth-of-type(2n) {
                  background: transparent;
                }

                .item-name {
                  width: 120px;
                  padding-left: 33px;
                  box-sizing: border-box;
                  height: 100%;
                  font-family: PingFangSC-Regular;
                  font-size: 14px;
                  color: #FFFFFF;
                  line-height: 36px;
                  text-align: left;
                }

                .item-post {
                  width: 100px;
                  padding-left: 33px;
                  box-sizing: border-box;
                  height: 100%;
                  font-family: PingFangSC-Regular;
                  font-size: 14px;
                  color: #FFFFFF;
                  line-height: 36px;
                  text-align: left;
                }

                .item-phone {
                  width: 150px;
                  padding-left: 33px;
                  box-sizing: border-box;
                  height: 100%;
                  font-family: PingFangSC-Regular;
                  font-size: 14px;
                  color: #FFFFFF;
                  line-height: 36px;
                  text-align: left;
                }

                .item-state {
                  width: 350px;
                  padding-left: 33px;
                  box-sizing: border-box;
                  height: 100%;
                  font-family: PingFangSC-Regular;
                  font-size: 14px;
                  color: #FFFFFF;
                  line-height: 36px;
                  text-align: left;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

              }
            }
          }

          .table-footer {
            width: 100%;
            padding-top: 60px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
  }
    body::-webkit-scrollbar {
    display: none;
  }

  .type-list::-webkit-scrollbar {
    display: none;
  }
</style>
<style lang="">
.content_dialog>div>.el-dialog__header{
 padding:0
}
.content_dialog>div>.el-dialog__body{
  padding:0
}
.contentnone>.el-dialog{
margin-top:0 !important
}
</style>
